.vk-alert {
  --vk-alert-padding: 8px 16px;
  --vk-alert-border-radius-base: var(--vk-border-radius-base);
  --vk-alert-title-font-size: 14px;
  --vk-alert-title-with-description-font-size: 16px;
  --vk-alert-description-font-size: 14px;
  --vk-alert-close-font-size: 16px;
  --vk-alert-close-customed-font-size: 14px;
  --vk-alert-icon-size: 16px;
  --vk-alert-icon-large-size: 28px;
  width: 100%;
  padding: var(--vk-alert-padding);
  margin: 0;
  box-sizing: border-box;
  border-radius: var(--vk-alert-border-radius-base);
  position: relative;
  background-color: var(--vk-color-white);
  overflow: hidden;
  opacity: 1;
  display: flex;
  align-items: center;
  /* transition: opacity var(--vk-transition-duration-fast); */
}
@each $val in primary, success, warning, info, danger {
  .vk-alert--$(val) {
    --vk-alert-text-color: var(--vk-color-white);
    --vk-alert-bg-color: var(--vk-color-$(val));
    --vk-alert-border-color: var(--vk-color-$(val));
    --vk-alert-outline-color: var(--vk-color-$(val)-light-5);
    --vk-alert-active-color: var(--vk-color-$(val)-dark-2);

    --vk-alert-hover-text-color: var(--vk-color-white);
    --vk-alert-hover-bg-color: var(--vk-color-$(val)-light-3);
    --vk-alert-hover-border-color: var(--vk-color-$(val)-light-3);

    --vk-alert-active-border-color: var(--vk-color-$(val)-dark-2);
    --vk-alert-active-bg-color: var(--vk-color-$(val)-dark-2);

    --vk-alert-disabled-text-color: var(--vk-color-white);
    --vk-alert-disabled-bg-color: var(--vk-color-$(val)-light-5);
    --vk-alert-disabled-border-color: var(--vk-color-$(val)-light);
  }
}
